<?php
include 'ini.php';
include 'header.php';

if (isLoggedIn())
{
    header('Location: index.php');
    exit;
}
?>

<script type="text/javascript"> 

function checkForm()
{
  var email = document.getElementById("email").value;
  var username = document.getElementById("username").value;
  
  if ( !isEmail(email) )
  {
      $('#email').popover('show');
      return false;
  }
  
  if ( !validateCode(username) )
  {
    $('#username').popover('show');
    return false;
  }
  
    $('#email').popover('hide');
    $('#username').popover('hide');
  
  
   if (!checkPassword())
   {
       return false;
   }
   
   
}
    
function validateCode(TCode)
{
    if( /[^a-zA-Z0-9]/.test( TCode ) ) 
    {
       return false;
    }
    
    return true;     
 }
function checkPassword()
{
    var pass1 = document.getElementById("password").value;
    var pass2 = document.getElementById("confirmPassword").value;

    if(pass1 !== pass2 || pass1.length < 1 || pass2.length < 1)
    {
        document.getElementById("confirmPassDiv").className = 'form-group has-error';
        document.getElementById("passwordDiv").className = 'form-group has-error'; 
        return false;
    }
    else
    {
        document.getElementById("confirmPassDiv").className = 'form-group has-success';
        document.getElementById("passwordDiv").className = 'form-group has-success'; 
        return true;
    }
}


function isEmail(email) 
{
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

</script>
<div class="loneTitle"> Create your Officially Awesome account.</div>

 <?php if (isset($_GET['err']) ) 
     {
        echo '<p class="loginError alert-danger">';
       switch($_GET['err'])
       {
        case 1:
            echo "Missing required field(s).";
            break;
        case 2:
            echo "Passwords did not match.";
            break;
        case 3:
            echo "Username can only contain letters and numbers.";
            break;
        case 4:
            echo "Invalid email address.";
            break;
        case 5:
            echo "Email address is already in use.";
            break;
        case 6:
            echo "Username is already in use.";
            break;
        default:
            echo "An error occured while processing your registration... Sorry about that! Give it another try.";
            break;
       }
        echo "</p>";
     };
     ?>


<div style="margin: auto; width: 300px;">
    <form id="signin-form" method="post" action="registerNewUser.php">    
  <fieldset>
      <center>
      <legend></legend>
      </center>
      <div class="form-group">
      <label for="exampleInputEmail">Email address</label>
      <input type="text" class="form-control" id="email" name="email" placeholder="Enter email"
             data-container="body" data-toggle="popover" data-placement="right" data-content="Please enter a valid email address.">
    </div>
            <div class="form-group">
      <label for="exampleInputEmail">Pick a username</label>
      <input type="text" class="form-control" id="username" name="username" placeholder="Enter username"
             data-container="body" data-toggle="popover" data-placement="right" data-content="Username can contain only letters and numbers.">

    </div>
    <div class="form-group" id="passwordDiv">
      <label for="exampleInputPassword">Password</label>
      <input type="password" class="form-control" id="password" name="password" placeholder="Password">
    </div>
      <div class="form-group" id="confirmPassDiv">
      <label for="exampleInputPassword">Confirm Password</label>
      <input onblur="checkPassword();" type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="Password">
    </div>
  </fieldset>
       <button type="submit" class="btn btn-primary btn-block" onclick="return checkForm();" id="submitButton">Create your Officially Awesome account</button>
</form>
</div>
